<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可爱桌宠</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden;
            transition: background 0.5s ease;
        }

        body.sunny {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
        }

        body.rainy {
            background: linear-gradient(135deg, #87CEEB 0%, #4169E1 100%);
        }

        /* 添加猫爪印背景 */
        .cat-paw-bg {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .paw-print {
            position: absolute;
            width: 40px;
            height: 40px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd700"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>') no-repeat center;
            opacity: 0.15;
            animation: fadeInOut 4s infinite;
            transform: rotate(var(--rotation));
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0.15; }
            50% { opacity: 0.3; }
        }

        .desktop-pet {
            position: fixed;
            bottom: 50%;
            right: 50%;
            transform: translate(50%, 50%);
            width: 180px;
            height: 180px;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        /* 添加猫耳朵装饰 */
        .cat-ears {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 50px;
            pointer-events: none;
            z-index: 2;
        }

        .cat-ear {
            width: 25px;
            height: 35px;
            background: #ffd700;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            animation: earWiggle 2s infinite;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .cat-ear:nth-child(2) {
            animation-delay: 0.5s;
        }

        @keyframes earWiggle {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(5deg); }
        }

        /* 添加猫尾巴 */
        .cat-tail {
            position: absolute;
            bottom: 40px;
            right: -25px;
            width: 30px;
            height: 100px;
            background: #ffd700;
            border-radius: 15px;
            transform-origin: top center;
            animation: tailWag 3s infinite;
            z-index: -1;
        }

        .cat-tail::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: #ffd700;
            border-radius: 50%;
        }

        @keyframes tailWag {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(15deg); }
            75% { transform: rotate(-15deg); }
        }

        /* 添加猫玩具 */
        .cat-toys {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
        }

        .toy {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff6b6b;
            border-radius: 50%;
            animation: float 4s infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* 添加猫粮碗 */
        .food-bowl {
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 40px;
            height: 20px;
            background: #ffd700;
            border-radius: 50%;
            opacity: 0.6;
            animation: bowlShine 2s infinite;
        }

        @keyframes bowlShine {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 0.8; }
        }

        /* 添加猫砂盆 */
        .litter-box {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 30px;
            background: #87CEEB;
            border-radius: 5px;
            opacity: 0.6;
        }

        /* 添加互动提示 */
        .interaction-hint {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 15px;
            border-radius: 15px;
            font-size: 12px;
            color: #666;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .interaction-hint.show {
            opacity: 1;
        }

        .desktop-pet:hover {
            transform: translate(50%, 50%) scale(1.05);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .desktop-pet img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
            border-radius: 15px;
        }

        .desktop-pet.walking img {
            animation: walk 0.5s infinite alternate;
        }

        .desktop-pet.jumping img {
            animation: jump 0.5s ease;
        }

        .desktop-pet.shaking img {
            animation: shake 0.5s ease;
        }

        @keyframes walk {
            0% { transform: translateX(0); }
            100% { transform: translateX(10px); }
        }

        @keyframes jump {
            0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0); }
        }

        @keyframes shake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }

        .speech-bubble {
            position: absolute;
            top: 50%;
            left: -160px;
            transform: translateY(-50%);
            background-color: white;
            padding: 12px 20px;
            border-radius: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: none;
            white-space: nowrap;
            z-index: 1001;
            font-size: 14px;
            color: #333;
            max-width: 200px;
            text-align: center;
            line-height: 1.4;
            transition: all 0.3s ease;
        }

        .speech-bubble::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -12px;
            transform: translateY(-50%);
            border-left: 12px solid white;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
        }

        .speech-bubble::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -11px;
            transform: translateY(-50%);
            border-left: 12px solid rgba(0, 0, 0, 0.1);
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            z-index: -1;
        }

        .status-bar {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            background: rgba(255, 255, 255, 0.95);
            padding: 8px 15px;
            border-radius: 15px;
            font-size: 13px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            z-index: 1002;
            min-width: 200px;
            justify-content: center;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #555;
        }

        .status-icon {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .mood-happy { 
            background: linear-gradient(135deg, #ffd700, #ffa500);
        }
        .mood-normal { 
            background: linear-gradient(135deg, #90EE90, #32CD32);
        }
        .mood-sad { 
            background: linear-gradient(135deg, #87CEEB, #4169E1);
        }

        .energy {
            font-weight: 500;
            color: #666;
        }

        /* 添加拖拽时的样式 */
        .desktop-pet.dragging {
            opacity: 0.8;
            transform: translate(50%, 50%) scale(1.1);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        }

        /* 添加新的动画效果 */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* 添加新的交互元素 */
        .pet-menu {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            padding: 5px;
            display: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1003;
        }

        .menu-item {
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .menu-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        /* 添加心情指示器 */
        .mood-indicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
        }

        .mood-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ddd;
            transition: background 0.3s;
        }

        .mood-dot.active {
            background: #ffd700;
            animation: pulse 1s infinite;
        }

        /* 添加互动区域 */
        .interaction-area {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s;
            opacity: 0;
            pointer-events: none;
        }

        .desktop-pet:hover .interaction-area {
            opacity: 1;
            pointer-events: auto;
        }

        .interaction-area:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.2);
        }

        /* 添加食物动画 */
        .food {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ffd700;
            border-radius: 50%;
            animation: bounce 0.5s infinite;
        }

        /* 添加睡觉动画 */
        .sleeping {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            display: none;
        }

        .sleeping::before,
        .sleeping::after {
            content: 'Z';
            position: absolute;
            color: #666;
            font-size: 20px;
            animation: float 1s infinite;
        }

        .sleeping::before {
            left: -20px;
            animation-delay: 0.2s;
        }

        .sleeping::after {
            right: -20px;
            animation-delay: 0.4s;
        }

        /* 添加天气效果 */
        .weather {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .sun {
            position: absolute;
            top: 20%;
            right: 20%;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, #ffd700 0%, #ffa500 100%);
            border-radius: 50%;
            box-shadow: 0 0 50px #ffd700;
            animation: sunShine 2s infinite;
            z-index: 2;
        }

        .sun::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            animation: sunGlow 2s infinite;
        }

        @keyframes sunGlow {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        .rain {
            position: absolute;
            width: 2px;
            height: 20px;
            background: rgba(0, 0, 0, 0.1);
            animation: rain 1s linear infinite;
        }

        @keyframes rain {
            0% { transform: translateY(-100vh); }
            100% { transform: translateY(100vh); }
        }

        @keyframes sunShine {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.9; }
        }

        /* 添加昼夜效果 */
        .day-night {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            transition: background 0.5s;
            pointer-events: none;
            z-index: 2;
        }

        .night {
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="weather"></div>
    <div class="day-night"></div>
    <div class="cat-paw-bg"></div>
    <div class="cat-toys"></div>
    <div class="food-bowl"></div>
    <div class="litter-box"></div>
    
    <div class="desktop-pet">
        <div class="pet-menu">
            <div class="menu-item" data-action="feed">喂食</div>
            <div class="menu-item" data-action="sleep">睡觉</div>
            <div class="menu-item" data-action="play">玩耍</div>
            <div class="menu-item" data-action="settings">设置</div>
        </div>
        <div class="cat-ears">
            <div class="cat-ear"></div>
            <div class="cat-ear"></div>
        </div>
        <div class="cat-tail"></div>
        <div class="status-bar">
            <div class="status-item">
                <span class="status-icon mood-happy"></span>
                <span class="mood-text">开心</span>
            </div>
            <div class="status-item">
                <span class="energy">能量: 100%</span>
            </div>
        </div>
        <img src="条条.jpg" alt="桌宠">
        <div class="speech-bubble"></div>
        <div class="interaction-hint">点击我试试！</div>
        <div class="mood-indicator">
            <div class="mood-dot"></div>
            <div class="mood-dot"></div>
            <div class="mood-dot"></div>
        </div>
        <div class="sleeping"></div>
    </div>

    <script>
        const pet = document.querySelector('.desktop-pet');
        const speechBubble = document.querySelector('.speech-bubble');
        const moodText = document.querySelector('.mood-text');
        const energyText = document.querySelector('.energy');
        const moodIcon = document.querySelector('.status-icon');
        const petImage = document.querySelector('.desktop-pet img');

        const messages = {
            happy: [
                '你好呀！',
                '今天天气真好！',
                '要开心哦！',
                '摸摸头~',
                '我是你的小桌宠！',
                '最喜欢你了！',
                '来玩吧！'
            ],
            normal: [
                '有点无聊呢...',
                '想出去玩~',
                '陪我聊天吧！',
                '今天过得怎么样？'
            ],
            sad: [
                '好想睡觉...',
                '有点累了...',
                '想休息一下...',
                '今天好困啊...'
            ]
        };

        let isDragging = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;
        let xOffset = 0;
        let yOffset = 0;
        let energy = 100;
        let mood = 'happy';
        let lastInteraction = Date.now();

        // 拖拽功能
        pet.addEventListener('mousedown', dragStart);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', dragEnd);

        function dragStart(e) {
            initialX = e.clientX - xOffset;
            initialY = e.clientY - yOffset;

            if (e.target === pet || e.target.parentElement === pet) {
                isDragging = true;
            }
        }

        function drag(e) {
            if (isDragging) {
                e.preventDefault();
                currentX = e.clientX - initialX;
                currentY = e.clientY - initialY;

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, pet);
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
        }

        function dragEnd() {
            initialX = currentX;
            initialY = currentY;
            isDragging = false;
        }

        // 点击显示消息
        pet.addEventListener('click', (e) => {
            if (!isDragging) {
                showMessage();
                updateMood('happy');
                energy = Math.min(100, energy + 10);
                updateEnergy();
                recordInteraction();
            }
        });

        // 双击触发特殊动作
        pet.addEventListener('dblclick', () => {
            pet.classList.add('jumping');
            setTimeout(() => {
                pet.classList.remove('jumping');
            }, 500);
            showMessage('happy');
            recordInteraction();
        });

        // 悬停效果
        pet.addEventListener('mouseenter', () => {
            pet.classList.add('walking');
            const toys = document.querySelectorAll('.toy');
            toys.forEach(toy => {
                toy.style.animation = 'float 2s infinite';
            });
        });

        pet.addEventListener('mouseleave', () => {
            pet.classList.remove('walking');
        });

        // 右键菜单
        pet.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            pet.classList.add('shaking');
            setTimeout(() => {
                pet.classList.remove('shaking');
            }, 500);
            showMessage('sad');
        });

        function showMessage(type = mood) {
            const messageList = messages[type];
            const randomMessage = messageList[Math.floor(Math.random() * messageList.length)];
            speechBubble.textContent = randomMessage;
            speechBubble.style.display = 'block';
            
            setTimeout(() => {
                speechBubble.style.display = 'none';
            }, 2000);
        }

        function updateMood(newMood) {
            mood = newMood;
            moodText.textContent = {
                'happy': '开心',
                'normal': '普通',
                'sad': '难过'
            }[mood];
            moodIcon.className = `status-icon mood-${mood}`;
            
            // 更新天气效果
            updateWeather(mood);
            
            // 更新图片状态
            if (mood === 'sad') {
                petImage.src = '条条2.jpg';
            } else {
                petImage.src = '条条.jpg';
            }
        }

        // 更新天气效果
        function updateWeather(mood) {
            const weather = document.querySelector('.weather');
            const body = document.body;
            weather.innerHTML = ''; // 清除现有天气效果
            
            if (mood === 'sad') {
                body.classList.remove('sunny');
                body.classList.add('rainy');
                // 创建下雨效果
                for (let i = 0; i < 50; i++) {
                    const rain = document.createElement('div');
                    rain.className = 'rain';
                    rain.style.left = Math.random() * 100 + '%';
                    rain.style.animationDelay = Math.random() * 2 + 's';
                    weather.appendChild(rain);
                }
            } else if (mood === 'happy') {
                body.classList.remove('rainy');
                body.classList.add('sunny');
                // 创建晴天效果
                const sun = document.createElement('div');
                sun.className = 'sun';
                weather.appendChild(sun);
            } else {
                body.classList.remove('sunny', 'rainy');
            }
        }

        function updateEnergy() {
            energyText.textContent = `能量: ${energy}%`;
        }

        // 定期更新状态
        setInterval(() => {
            const now = Date.now();
            const timeSinceLastInteraction = now - lastInteraction;
            
            if (timeSinceLastInteraction > 30000) { // 恢复为30秒无交互
                energy = Math.max(0, energy - 5); // 恢复为每次减少5点能量
                updateEnergy();
                
                if (energy < 30) {
                    updateMood('sad');
                } else if (energy < 70) {
                    updateMood('normal');
                }
            }
        }, 5000); // 恢复为每5秒检查一次

        // 记录交互时间
        function recordInteraction() {
            lastInteraction = Date.now();
        }

        pet.addEventListener('click', recordInteraction);
        pet.addEventListener('dblclick', recordInteraction);
        pet.addEventListener('contextmenu', recordInteraction);

        // 修改猫爪印背景生成函数
        function createPawPrints() {
            const pawBg = document.querySelector('.cat-paw-bg');
            for (let i = 0; i < 15; i++) {
                const paw = document.createElement('div');
                paw.className = 'paw-print';
                paw.style.left = Math.random() * 100 + '%';
                paw.style.top = Math.random() * 100 + '%';
                paw.style.animationDelay = Math.random() * 4 + 's';
                paw.style.setProperty('--rotation', Math.random() * 360 + 'deg');
                pawBg.appendChild(paw);
            }
        }

        // 添加玩具
        function createToys() {
            const toysContainer = document.querySelector('.cat-toys');
            for (let i = 0; i < 5; i++) {
                const toy = document.createElement('div');
                toy.className = 'toy';
                toy.style.left = Math.random() * 100 + '%';
                toy.style.top = Math.random() * 100 + '%';
                toy.style.animationDelay = Math.random() * 4 + 's';
                toysContainer.appendChild(toy);
            }
        }

        // 显示交互提示
        function showInteractionHint() {
            const hint = document.querySelector('.interaction-hint');
            hint.classList.add('show');
            setTimeout(() => {
                hint.classList.remove('show');
            }, 3000);
        }

        // 初始化
        createPawPrints();
        createToys();
        showInteractionHint();
        updateWeather('happy');

        // 添加新的交互消息
        messages.happy.push(
            '喵喵喵~',
            '要玩玩具吗？',
            '想吃小鱼干！',
            '主人最好了！',
            '陪我玩嘛~'
        );

        messages.normal.push(
            '喵~',
            '有点想睡觉了...',
            '想晒太阳~',
            '主人忙完了吗？'
        );

        messages.sad.push(
            '喵...',
            '好想主人...',
            '想喝牛奶...',
            '主人不理我了...'
        );

        // 添加新的功能
        const menu = document.querySelector('.pet-menu');
        const sleeping = document.querySelector('.sleeping');
        const moodDots = document.querySelectorAll('.mood-dot');
        const weather = document.querySelector('.weather');
        const dayNight = document.querySelector('.day-night');

        // 右键菜单
        pet.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        });

        // 点击其他地方关闭菜单
        document.addEventListener('click', (e) => {
            if (!menu.contains(e.target) && e.target !== pet) {
                menu.style.display = 'none';
            }
        });

        // 菜单项点击事件
        menu.addEventListener('click', (e) => {
            const action = e.target.dataset.action;
            switch(action) {
                case 'feed':
                    feedPet();
                    break;
                case 'sleep':
                    toggleSleep();
                    break;
                case 'play':
                    playWithPet();
                    break;
                case 'settings':
                    showSettings();
                    break;
            }
            menu.style.display = 'none';
        });

        // 喂食功能
        function feedPet() {
            const food = document.createElement('div');
            food.className = 'food';
            food.style.left = '50%';
            food.style.top = '0';
            pet.appendChild(food);
            
            setTimeout(() => {
                food.remove();
                energy = Math.min(100, energy + 30);
                updateEnergy();
                showMessage('happy');
            }, 1000);
        }

        // 睡觉功能
        function toggleSleep() {
            const isSleeping = sleeping.style.display === 'block';
            sleeping.style.display = isSleeping ? 'none' : 'block';
            if (!isSleeping) {
                energy = Math.min(100, energy + 20);
                updateEnergy();
                showMessage('normal');
            }
        }

        // 玩耍功能
        function playWithPet() {
            pet.classList.add('jumping');
            const toys = document.querySelectorAll('.toy');
            toys.forEach(toy => {
                toy.style.animation = 'float 1s infinite';
            });
            setTimeout(() => {
                pet.classList.remove('jumping');
                toys.forEach(toy => {
                    toy.style.animation = '';
                });
            }, 1000);
            energy = Math.max(0, energy - 10);
            updateEnergy();
            showMessage('happy');
        }

        // 设置功能
        function showSettings() {
            // 这里可以添加设置面板
            showMessage('normal');
        }

        // 更新心情指示器
        function updateMoodIndicator() {
            moodDots.forEach((dot, index) => {
                dot.classList.toggle('active', index < (energy / 33.33));
            });
        }

        // 修改现有的updateEnergy函数
        function updateEnergy() {
            energyText.textContent = `能量: ${energy}%`;
            updateMoodIndicator();
        }

        // 添加昼夜效果
        function updateDayNight() {
            const hour = new Date().getHours();
            dayNight.classList.toggle('night', hour >= 20 || hour < 6);
        }

        // 初始化新功能
        updateDayNight();
        setInterval(updateDayNight, 60000); // 每分钟更新一次昼夜效果
    </script>
</body>
</html>
